<template>
	<view class="invite-friends">
		<view class="img-desc next-recharge">
			<image class="imgs" src="/static/mine/friends/invite.png" mode=""></image>
			<view class="">
				<u-field class="invite1" v-model="inviteCode" label="邀请码" placeholder="请输入邀请码" :clearable="false">
					<u-button class="btn-copy code" slot="right" type="success" @tap="getCopy">复制</u-button>
				</u-field>
				<u-field class="invite2" v-model="inviteUrl" label="邀请链接" placeholder="请输入邀请链接" :clearable="false">
					<u-button class="btn-copy link" slot="right" type="success" @tap="getCopy">复制</u-button>
				</u-field>
			</view>
		</view>
		<view class="">
			<agent-common></agent-common>
		</view>
		<view class="qr-code next-recharge">
			<u-row gutter="20">
				<u-col :span="6">
					<image class="img" src="/static/mine/friends/wx.png" mode=""></image>
				</u-col>
				<u-col :span="6">
					<view class="wx-qr">
						<view class="save-qr">
							点击按钮保存或截屏保存二维码到手机
						</view>
						<u-button class="custom-style">保存二维码</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script>
	import AgentCommon from '../../../components/agent-common/agent-common.vue'
	export default {
		data() {
			return {
				inviteCode: '',
				inviteUrl: '',
			}
		},
		components: {
			AgentCommon
		},
		methods: {
			getCopy(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.invite-friends{
	.img-desc{
		background-color: #FFFFFF;
		border-top: 1px solid #F2F2F2;
		.imgs{
			width: 100%;
			height: 320rpx;
		}
		.invite1, .invite2{
			margin: 20rpx 0rpx;
			border-radius: 20rpx;
			padding: 0rpx 0rpx 0rpx 20rpx;
			background-color: #F6F6FF;
		}
		.invite1 /deep/ .uni-input-input{
			font-size: 40rpx;
			font-weight: bold;
		}
		.invite2 /deep/ .uni-input-input{
			font-size: 32rpx;
		}
		.code{
			background-color: #F79934;
			background-image: linear-gradient(to right, #FFB86A , #F79934);
		}
		.link{
			background-color: #4962FE;
			background-image: linear-gradient(to right, #738EFF , #4962FE);
		}
		.btn-copy{
			border-top-left-radius: 0rpx;
			border-bottom-left-radius: 0rpx;
		}
	}
	.refund{
		background-color: #FFFFFF;
		.lower{
			border-radius: 10rpx;
			border: 1px solid #FACA95;
			/deep/ .u-col{
				padding: 0rpx !important;
				text-align: center !important;
			}
			.level{
				padding: 10rpx 0rpx;
				color: #F25D19;
				font-size: 32rpx;
				background-color: #FFE9D0;
			}
			.percent{
				font-weight: bold;
				padding: 10rpx 0rpx;
			}
		}
	}
	.qr-code{
		background-color: #FFFFFF;
		.img{
			width: 100%;
			height: 320rpx;
		}
		.wx-qr{
			text-align: center;
			.save-qr{
				margin: 20rpx 0rpx;
				color: #A6A6A6;
			}
			.custom-style{
				color: #FFFFFF;
				background-color: #F59328;
			}
		}
	}
}
</style>
